<template>
  <view class="teacher">
    <!-- 老师的个人信息 -->
    <view class="info">
      <image :src="teacher.avatar"></image>
      <view class="detail">
        <view class="one">
          <span>NAME: {{teacher.name}}</span>
          <span>AGE: {{teacher.age}}</span>
        </view>
        <view class="two">
          <span>SCHOOL: {{teacher.school}}</span>
        </view>
      </view>
    </view>
    <!-- 老师的课程 -->
    <view class="course">
      <ul @click="toClass">
        <li class="course_item item_mask" v-for="course in teacher.course" :key="course.id" :data-id="course.id">
            <image :src="course.image_url"></image>
            <view class="course_info">
              <p class="title">{{course.title}}</p>
              <p class="intro">{{course.introduce}}</p>
            </view>
        </li>
      </ul>
    </view>
  </view>
</template>

<script>
  import {toClass} from '@/utils/common.js'
  export default {
    data() {
      return {
        teacher: {
          avatar: 'http://120.46.150.252:10004/static/images/teacher1.png',
          name: '张三',
          age: 43,
          school: '电子科技大学',
          course: [{
              id: 4010,
              title: '高等数学',
              introduce: "风声雨声读书声",
              image_url: 'http://120.46.150.252:10004/static/images/05.jpg'
            },
            {
              id: 4011,
              title: '高等数学',
              introduce: "风声雨声读书声",
              image_url: 'http://120.46.150.252:10004/static/images/06.jpg'
            },
            {
              id: 4012,
              title: '高等数学',
              introduce: "风声雨声读书声",
              image_url: 'http://120.46.150.252:10004/static/images/03.jpg'
            },
            {
              id: 4013,
              title: '高等数学',
              introduce: "风声雨声读书声",
              image_url: 'http://120.46.150.252:10004/static/images/04.jpg'
            },
            {
              id: 4014,
              title: '高等数学',
              introduce: "风声雨声读书声",
              image_url: 'http://120.46.150.252:10004/static/images/02.jpg'
            },
          ]
        }
      };
    },
    methods: {
      toClass(e) {
        return toClass(e.target.dataset.id)
      },
    }
  }
</script>

<style lang="less">
  page {
    background-color: #e8e8e8;
  }

  .teacher {
    .info {
      position: fixed;
      top: 0;
      left: 0;
      padding: 30rpx 0;
      width: 100%;
      height: 150rpx;
      display: flex;
      align-items: center;
      box-shadow: 0rpx 4rpx 6rpx 6rpx #e2e2e2;
      background-color: #fff;
      border-end-start-radius: 30rpx;
      border-end-end-radius: 30rpx;

      image {
        flex: 1;
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
      }

      .detail {
        flex: 3;
        padding-left: 30rpx;
        height: 150rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .one {
          width: 80%;
          display: flex;
          justify-content: space-between;
          font-size: 36rpx;
          font-weight: 500;
        }
      }
    }

    .course {
      margin-top: 200rpx;
      padding: 20rpx 20rpx 0 20rpx;
      // 遮罩层
      .item_mask {
        position: relative;
      }
      .item_mask::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      .course_item {
        margin: 20rpx 0;
        padding: 30rpx 20rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 50rpx;
        box-shadow: 2rpx 2rpx 2rpx 2rpx #e2e2e2;

        image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 20rpx;
        }

        .course_info {
          height: 120rpx;
          padding: 10rpx 40rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-size: 48rpx;
            font-weight: 600;
          }
        }
      }
    }
  }
</style>
